import React, { Component } from "react";
import { Modal, Form, Input, Radio, Spin, message, Select } from "antd";
import { getListnewArr } from "utils/utils";

const FormItem = Form.Item;
const Option = Select.Option;

@Form.create()
export default class RoleEditForm extends Component {
  constructor(props) {
    super(props);
    const { record } = props;
    this.state = {
      formDatas: {
        id: "",
        userName: "",
        pswd: null,
        cellphone: "",
        email: "",
        nickName: "",
        remark: "",
        role: [],
        ...record
      }
    };
  }
  /**
   * 返回表单数据到父组件
   */
  onOk = () => {
    this.props.form.validateFields((err, values) => {
      if (!err) {
        this.props.onOk(values);
      }
    });
  };
  /**
   * 清除表单数据
   */
  handleFormClear = () => {
    const { form } = this.props;
    form.resetFields();
  };

  render() {
    const {
      modalType = null,
      visible,
      onCancel,
      record,
      loading = false,
      recordAllRole,
      form
    } = this.props;
    const { treeData, checkedKeys } = recordAllRole;
    const { getFieldDecorator } = form;
    let { formDatas } = this.state;
    formDatas = { formDatas, ...record };
    // if(formDatas.role){
    //   const newArr=getListnewArr(formDatas.role,'id');
    // }

    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 19 }
      }
    };
    return (
      <span>
        <Modal
          visible={visible}
          title="编辑角色"
          okText="提交"
          confirmLoading={loading}
          onCancel={onCancel}
          onOk={this.onOk}
          afterClose={this.handleFormClear}
        >
          <Spin tip="数据加载中..." spinning={loading}>
            <Form layout="vertical">
              <FormItem {...formItemLayout} label="角色名">
                {getFieldDecorator("roleIds", {
                  initialValue: checkedKeys,
                  // rules: [{ required: true, message: "请选择角色名！" }]
                })(
                  <Select
                    // onFocus={this.handleAllRole}
                    mode={modalType}
                    optionFilterProp="children"
                    notFoundContent="无法找到"
                    searchPlaceholder="请选择角色名"
                  >
                    {null == treeData
                      ? null
                      : treeData.map((item, i) => {
                          return (
                            <Option key={i} value={item.key}>
                              {item.title}
                            </Option>
                          );
                        })}
                  </Select>
                )}
              </FormItem>
            </Form>
          </Spin>
        </Modal>
      </span>
    );
  }
}
